<template>
	<!-- <image class='back-pre' src='../../images/ic_back.png' style='margin-top:{{back_margin}}px' bindtap='onBack'></image> -->
	<view>
		<view class="back"><text @click="back()" style="font-size: 40upx;" class="iconfont icon-left"></text></view>
		<view class='banner-view' @click='onMorePhotos()'>
		  <!-- <bannerA :dots='false' bind:swiperChange='onSwiperChange' :banners="bannerData"></bannerA> -->
		  <image style="width: 100%;height: 100%;" :src="foodData.mainImage"></image>
		</view>
		
		<view class='resta-info-block'>
		  <view class='resta-info'>
		    <view class='resta-info-topOf'>
		      <view class='restaInfoCon'>
				<view class='restaName'>
					<text>{{foodData.title}}</text>
				</view>
		        <view class='restaOtherInfo'>
		          <view class='restaOtherInfo-item2'>
						<view style="display: flex;">
							<view class='restaOtherInfo-item-key'>
								<!-- <image class='restaOtherInfo-ico' src='../../static/img/美食详情_14.png'></image> -->
								<text class="iconfont icon-xiaofeijilu" style="font-size: 36upx;"></text>
								<text class='restaOtherInfo-keyWord'>消费</text>
							</view>
							<view class='restaOtherInfo-item-value'>人均约{{foodData.perPerson || 0}}元</view>
						</view>
						<view class='telephoneCon' @click='callPhone()'>
							<!-- <image class='telephoneIco' src='' @click='callPhone()'></image> -->
							<text class="iconfont icon-dianhua" style="font-size: 80upx;color: #0092ff;"></text>
						</view>
		          </view>
		        </view>
		      </view>
		    <!--  <view class='telephoneCon'>
		        <image class='telephoneIco' src='' @click='callPhone()'></image>
		      </view> -->
		    </view>
		    <view class='resta-info-bottomOf'>
		      <view class='restaAddrIcoCon'>
				  <text class="iconfont icon-diliweizhi" style="font-size: 36upx;"></text>
		        <!-- <image class='restaAddrIco' src='../../static/img/美食详情_03.png'></image> -->
		      </view>
		      <view class='restaAddrInfoCon'>
		        <text class="restaAddrInfoCon-addr">{{foodData.address}}</text>
		        <!-- <text class="restaAddrInfoCon-diatance" hidden='{{true}}'>距离当前位置约20.5km</text> -->
		      </view>
		    </view>
		  </view>
		</view>
		<view class='foodList' v-if="foods.length > 0">
		  <scroll-view scroll-x class='foodListCon'>
		    <view class='foodItem' v-for='(item,index) in foods' :key='index' @click='onFoodItemClick'>
		      <text class='foodItem-name'>{{item.name}}</text>
		      <image class='foodeItem-backImg' :src="item.url"></image>
		    </view>
		  </scroll-view>
		  <view class='topicLabel'>
		    <text class='topicLabel-key'>本店特色</text>
		  </view>
		</view>
		<view v-if="foods.length > 0" style='width: 100%;height: 22upx;background-color: #f7f7f7;'></view>
		<!-- <view style='height: 100upx;width: 100%'></view> -->
		<view class="popular-travels">
			<view class="popular-travels-title">
				<text>热门推荐</text>
			</view>
			 <view class="popular-travels-list-boxs">
				 <block v-for="(item,index) in recommendTravels" :key="index">
					 <view class="popular-travels-list" @click="goToTravel(item.id,item.type)">
						 <view class="popular-travels-list-img">
							 <image :src="item.otherImage" style="width: 100%;height: 100%;border-radius: 6px 6px 0px 0px;"></image>
							 <view class="discover-travelist-aers">
							 	<!-- <text class="iconfont icon-location-fill" style="margin-right: 5upx;"></text> -->
							 	<text>{{item.type}}</text>
							 </view>
						 </view>
						
						 <view class="popular-travels-list-info">
							 <view class="popular-travels-list-text">
								 <text>{{item.title}}</text>
							 </view>
							 <view class="popular-travels-role">
								 <!-- <view class="popular-travels-list-headPortrait">
									<image style="width: 100%;height: 100%;border-radius: 50%;" :src="item.headPortrait"></image>
								 </view> -->
								 <view>
									<view class="popular-travels-list-author">
										<text>{{item.readCount || '0'}}人浏览</text>
									</view>
									 <!-- <view class="popular-travels-list-time">
										 <text>{{item.sendTime}}</text>
									 </view> -->
								 </view>
							 </view>
							 
						 </view>
					 </view>
				 </block>
			 </view>
		</view>
	</view>
	
</template>

<script>
	var tempKeyword = ''; //用于触底刷新
	var keyword = "";
	var currentPage2 = 1;
	export default {
		components: {
			
		},
		data() {
			return {
				recommendTravels:[],
				currentJiSanId:'',
				citys:'',
				foods:[],
				foodData:'',
				isEmpty: false,
				isNoMore: false
			}
		},
		onLoad: function(options) {
			currentPage2 = 1
			 var id = options.id;
			 this.citys = options.city
			    // console.log(banners)
			
			//     this.getFoodList(id);
			//     this.getNearbyList();
			    this.getFoodsDetails(id);
			    // this.getFoodsComment(id);
				this.getNewTravels_discover()
				
		},
		onShow() {
			// //#ifdef H5
			// document.title = '线路'
			// //#endif
		},
		onReachBottom: function() {
			// if (!this.isNoMore) {
			// 	this.getNewScenceList();
			// }
		},
		computed: {
	
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
				    phoneNumber: this.foodData.phone //仅为示例
				});
			},
			// getFoodList: function(id) {
			//     var that = this;
			//     app.http.getFoodDishes('', "", 0, "", id, 1, 100, function(data) {
			//       if (data.success) {
			//         for (let i = 0; i < data.rows.length; i++) {
			//           data.rows[i].img = app.http.fmtImgUrl(data.rows[i].img);
			//           data.rows[i].labels = []
			//           if (data.rows[i].promptLabel) {
			//             data.rows[i].labels = data.rows[i].promptLabel.replace(new RegExp("；", "gm"), ";").split(";");
			//           }
			//         }
			
			//         var content = data.rows;
			//         that.setData({
			//           // foods: content,
			//         })
			//       }
			//     });
			//   },
			goToTravel:function(id,type){
				console.log(type)
				var url = ''
				switch(type){
					case "景区":
						url = '/pages/scence/scencedetail?id=' + id
					break;
					case "酒店":
						url = '/pages/hotel/hoteldetail?hotelid=' + id
					break;
					case "游记":
						url = '/pages/travelDetail/travelDetail?id=' + id
					break;
					case "餐厅":
						url = '/pages/restaurant/restaurant_detail?id=' + id
					break;
					case "美食":
						url = '/pages/food/foodlist_new?id=' + id
					break;
					case "农家乐":
						url = '/pages/agritainment/agritainmentdateil?id=' + id + '&title='+ '菜品介绍'
					break;
				}
				uni.navigateTo({
					url:url,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			getFoodsDetails:function(id){
			    var that = this;
				var param = {
					id:id
				}
			    this.$postApi(this.$path.GET_RESTAURANT_DEATIL,param).then(res=>{
			      console.log("餐厅详情返回的参数", res)
			      var data = res.data.data
			      if (res.data.success) {
			        var foods = JSON.parse(data.recommeFood);
					this.foodData = res.data.data
					this.foods = foods
			        console.log(foods)
			        data.featureTip.split(";");
			      }
			    })
			  },
			  back() {
				uni.navigateBack({
					delta: 1
				});
			  },
			getNewTravels_discover:function(attribute){
				var that = this
				// this.recommendTravels = []
				var param = {
					channelType: '1',
					city:this.citys
				}
				this.$postApi(this.$path.GET_RECOMMEND_LIST,param).then(res=>{
					// this.recommendTravels = []
			
					// this.recommendTravels = res.data.data.list
					let list = res.data.data
					console.log("返回参数游记列表目的地",res)
					if (res.data.success) {
						list.forEach(item => {
							item.otherImage = this.pub.delLastf(item.otherImage)
							if(item.readCount == null || item.readCount == "null"){
								item.readCount = 0
							}
							switch(item.type){
								case "1":
									item.type = "景区"
								break;
								case "2":
									item.type = "酒店"
								break;
								case "3":
									item.type = "游记"
								break;
								case "4":
									item.type = "餐厅"
								break;
								case "5":
									item.type = "美食"
								break;
								case "6":
									item.type = "农家乐"
								break;
							}
						})
					this.recommendTravels = list
					}	
				})
				
			},
		}
	}
</script>

<style lang="scss">
	.popular-travels-role{
		display: flex;
		padding-bottom: 30upx;
	}
	.popular-travels-list-headPortrait{
		width: 36upx;
		height: 36upx;
		margin-right: 8upx;
		// border-radius: 50%;
	}
	.popular-travels-list-author{
		margin-bottom: 10upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #333333;
		opacity: 0.9;
	}
	.popular-travels-list-time{
		font-family: PingFang-SC-Medium;
		font-size: 20upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #999999;
		opacity: 0.9;
	}
	.popular-travels-title{
		padding: 57upx 0 17upx 24upx;
		font-family: PingFang-SC-Bold;
		font-size: 44upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #000000;
	}
	.popular-travels-list{
		width: 48.5%;
		margin-bottom: 24upx;
		background-color: #f3f4f8;
		border-radius: 0px 0px 6px 6px;
		
	}
	.discover-travelist-aers{
		padding: 5upx 12upx;
		background-color: #353638;
		border-radius: 20upx;
		opacity: 0.8;
		position: absolute;
		bottom:15upx;
		right: 15upx;
		font-family: PingFang-SC-Bold;
		font-size: 24upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #ffffff;
	}
	.popular-travels-list-info{
		padding: 20upx 13upx 0 13upx;
	}
	.popular-travels-list-boxs{
		background: #fff;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 18upx 24upx 24upx 24upx;
		
		
	}
	.popular-travels-list-img{
		position: relative;
		width: 100%;
		height: 267upx;
	}
	.popular-travels-list-text{
		width: 100%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		line-height: 40upx;
		margin-bottom: 20upx;
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #1a1a1a;
	}
	page {
	  background-color: white;
	}
	/* .iconbox{
		position: fixed;
		border-radius: 50%;
		left: 35upx;
		top: 85upx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		background: rgba(255,255,255,0.6);
		width: 50upx;
		height: 50upx;
	} */
	/* .back-pre {
	  position: fixed;
	  margin-top: 26upx;
	  margin-left: 26upx;
	  width: 56upx;
	  height: 56upx;
	  z-index: 9999999;
	} */
	.headPortrait{
	  width:54upx;
	  height:54upx;
	  border-radius:50%; 
	}
	.flex-space{
	  display: flex;
	  justify-content: space-between;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	
	.banner-view{
	  width: 100%; 
	  height:525upx;
	  position: relative;
	  background-color: white;
	}
	
	.block-banner {
	  width: 100%;
	  position: relative;
	  height: 825upx;
	  /* border: red 2px solid; */
	}
	
	.block-banner .info-block {
	  width: 100%;
	  height: 423upx;
	  top: 420upx;
	  position: absolute;
	  box-sizing: border-box;
	  /* border: olivedrab 2px solid; *//* top: -220upx; */
	}
	
	.info {
	  width: 100%;
	  height: 100%;
	  box-sizing: border-box;
	  padding-left: 54upx;
	  padding-right: 54upx;
	  display: flex;
	  flex-direction: column;
	  top: 0px;
	  left: 0px;
	  z-index: 999;
	  position: absolute;
	}
	
	.block-food {
	  display: flex;
	  width: 100%;
	  position: relative;
	  box-sizing: border-box;
	  margin-top: 24upx;
	}
	
	.food {
	  display: flex;
	  flex-direction: row;
	  width: 100%;
	  box-sizing: border-box;
	  padding-left: 52upx;
	  padding-right: 52upx;
	  padding-top: 50upx;
	  padding-bottom: 50upx;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}
	
	.food-item {
	  margin-bottom: 24upx;
	  width: 314upx;
	  height: 330upx;
	  flex-shrink: 0;
	  display:flex;
	  flex-direction: column;
	}
	.topImg{
	  position: relative;
	  width: 100%;
	  height: 525upx;
	  background-color: #fff;
	  overflow: hidden;
	}
	.topImg-img{
	  width: 100%;
	  height: 100%;
	}
	.pagination{
	  position: absolute;
	  bottom: 80upx;
	  right: 23upx;
	  display: flex;
	  align-items: center;
	  background-color: rgba(0, 0, 0, 0.3);
	  padding: 5upx 20upx;
	  border-radius: 30upx;
	}
	.pagination-ico{
	  width: 32upx;
	  height: 32upx;
	  margin-right: 6upx;
	}
	.pagination-photoIndex{
	  font-size: 25upx;
	  color: rgba(255, 255, 255, 0.9);
	}
	.pagination-currentPhotoIndex{
	  margin-right: 8upx;
	}
	.resta-info-block{
	  box-sizing: border-box;
	  width: 100%;
	  padding: 0 24upx 45upx 24upx;
	  position: relative;
	  bottom: 70upx;
	  margin-bottom: -70upx;
	}
	.restaOtherInfo-keyWord{
		font-weight: bold;
	}
	.resta-info{
	  box-sizing: border-box;
	  width: 100%;
	  height: 100%;
	  padding: 33upx 26upx 30upx 26upx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  z-index: 999;
	  background-color: #ffffff;
	  box-shadow: 3upx 14upx 14upx #f2f2f2;
	  border-radius: 17upx;
	}
	.resta-info-topOf{
	  box-sizing: border-box;
	  width: 100%;
	  border-bottom: #e5e5e5 solid 1upx;
	  /* padding-bottom: 30upx; */
	 /* display: flex;
	  justify-content: space-between;
	  align-items: flex-end; */
	}
	.restaInfoCon{
	  box-sizing: border-box;
	  /* width: 85%; */
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;
	  align-items: flex-start;
	}
	.telephoneCon{
		/* position: absolute;
		right: 0;
		z-index: 999; */
	  box-sizing: border-box;
	  width: 15%;
	  display: flex;
	  justify-content: flex-end;
	  align-items: flex-end;
	}
	.telephoneIco{
	  width: 70upx;
	  height: 70upx;
	}
	.restaName{
	  box-sizing: border-box;
	  width: 100%;
	  font-size: 47upx;
	  color: #000000;
	  font-weight: 700;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  display:-webkit-box; 
	  -webkit-box-orient:vertical;
	  -webkit-line-clamp:2;
	  letter-spacing: 4upx;
	}
	.restaOtherInfo{
	  box-sizing: border-box;
	  width: 100%;
	  /* margin-top: 30upx; */
	  letter-spacing: 4upx;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  line-height: 1.1;
	}
	.restaOtherInfo-item{
	  box-sizing: border-box;
	  width: 100%;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	  display: flex;
	  align-items: center;
	  margin-bottom: 10upx;
	}
	.restaOtherInfo-item2{
		/* position: relative; */
	  box-sizing: border-box;
	  width: 100%;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	  display: flex;
	  align-items: center;
	  /* margin-top: 10upx; */
	  justify-content: space-between;
	}
	.restaOtherInfo-item-key{
	  font-size: 32upx;
	  /* color: #333333; */
	  /* font-weight: bold; */
	  padding-right: 12upx;
	  display: flex;
	  align-items: center;
	}
	.restaOtherInfo-item-value{
	  font-size: 32upx;
	  color: #616161;
	  padding-left: 12upx;
	  border-left: #616161 solid 1upx;
	}
	.restaOtherInfo-ico{
	  width: 28upx;
	  height: 28upx;
	  margin: 0 10upx;
	}
	.resta-info-bottomOf{
	  box-sizing: border-box;
	  width: 100%;
	  padding-top: 30upx;
	  display:flex;
	  flex-direction:row;
	  justify-content: space-between;
	  align-items: center;
	}
	.restaAddrIcoCon{
	  width: 8%;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	}
	.restaAddrInfoCon{
	  width: 92%;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: flex-start;
	  line-height:1.2;
	}
	.restaAddrIco{
	  width:33upx;
	  height:42upx;
	  flex-shrink:0;
	}
	.restaAddrInfoCon-addr{
	  box-sizing: border-box;
	  width: 100%;
	  font-size:36upx;
	  font-weight: bold;
	  color:#333333;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  display:-webkit-box; 
	  -webkit-box-orient:vertical;
	  -webkit-line-clamp:3;
	  letter-spacing: 4upx;
	}
	.restaAddrInfoCon-diatance{
	  box-sizing: border-box;
	  width: 100%;
	  font-size:24upx;
	  color:#999999;
	  padding-top: 10upx;
	  overflow:hidden; 
	  text-overflow:ellipsis;
	  white-space: nowrap;
	  letter-spacing: 4upx;
	}
	.foodList{
	  width: 100%;
	  position: relative;
	}
	.foodListCon{
	  box-sizing: border-box;
	  width: 100%;
	  padding: 30upx 0 60upx 0;
	  white-space: nowrap;
	}
	.foodItem{
	  margin-right: 19upx;
	  width: 318upx;
	  height: 263upx;
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  border-radius: 12upx;
	}
	.foodItem:first-child{
	  margin-left: 24upx;
	}
	.foodItem:last-child{
	  margin-right: 24upx;
	}
	.foodItem-name{
	  color: rgba(255, 255, 255, 0.9);
	  font-size: 36upx;
	  font-weight: 700;
	  text-shadow: rgba(51,51,51,0.5) 1upx 2upx 2upx;
	  z-index: 1;
	  letter-spacing: 4upx;
	}
	.foodeItem-backImg{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  border-radius: 12upx;
	}
	.topicLabel{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 180upx;
	  height: 60upx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: linear-gradient(to right, #2d7dff, #21daff);
	  border-radius: 0 60upx 60upx 0;
	  z-index: 2;
	}
	.topicLabel-key{
	  color: rgba(255, 255, 255, 0.9);
	  font-size: 33upx;
	  font-weight: 700;
	}
	.lookMoreCommentKey{
	  color:#139aff;
	  font-size:30upx;
	  line-height:30upx;
	  margin-right:1upx;
	  letter-spacing: 3upx;
	  overflow: hidden;
	}
	.lookMoreCommentIco{
	  width:22upx;
	  height:22upx;
	  overflow: hidden;
	  position: relative;
	  top: 1upx;
	}
	
	.item-list-block {
	  box-sizing: border-box;
	  width: 100%;
	  padding: 0 24upx;
	}
	
	.item-block {
	  box-sizing: border-box;
	  width: 100%;
	  display: flex;
	  padding: 28upx 0;
	  border-bottom: #e5e5e5 solid 1upx;
	  position: relative;
	}
	
	.item-img {
	  height: 165upx;
	  width: 213upx;
	  position: absolute;
	  top: 28upx;
	  left: 0;
	  border-radius: 4upx;
	}
	.item-info{
	  box-sizing: border-box;
	  width: 100%;
	  height: 165upx;
	  padding: 5upx 0 13upx 233upx;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  justify-content: space-between;
	  line-height: 1.12;
	}
	.item-info-nameAndMark{
	  box-sizing: border-box;
	  width: 100%;
	  overflow:hidden; 
	  text-overflow:ellipsis;
	  white-space: nowrap;
	  display: flex;
	  align-items: flex-end;
	}
	.item-info-distance{
	  box-sizing: border-box;
	  width: 100%;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	  font-size: 26upx;
	  color: #808080;
	  letter-spacing: 3upx;
	}
	.item-info-perCostAndEvaluateNum{
	  box-sizing: border-box;
	  width: 100%;
	  overflow:hidden; 
	  text-overflow:ellipsis;
	  white-space: nowrap;
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-end;
	}
	.item-info-name{
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  font-size: 37upx;
	  color: rgb(26, 26, 26);
	  font-weight: 700;
	  letter-spacing: 3upx;
	}
	.item-info-mark{
	  font-size: 16upx;
	  color: rgb(0, 146, 255);
	  border-radius: 6upx;
	  border: rgba(0, 145, 255, 0.7) solid 1upx;
	  padding: 0 4upx;
	  margin-left: 6upx;
	  position: relative;
	  bottom: 5upx;
	}
	.item-info-perCost{
	  width: 65%;
	  font-size: 24upx;
	  color: #808080;
	  letter-spacing: 3upx;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  display: flex;
	  align-items: flex-end;
	}
	.item-info-evaluateNum{
	  width: 35%;
	  font-size: 24upx;
	  color: #808080;
	  letter-spacing: 4upx;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.item-info-perCost-enum{
	  font-size:26upx;
	  color:#FF3637;
	  position: relative;
	  top: 2upx;
	}
	.item-info-perCost-value{
	  font-size:48upx;
	  color:#FF3637;
	  font-weight:700;
	  position: relative;
	  top: 8upx;
	  margin-right: 2upx;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.noComment{
	  box-sizing: border-box;
	  padding: 24upx;
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}
	.noCommentImg{
	  width: 180upx;
	  height: 180upx;
	}
	.noCommentKey{
	  font-size: 30upx;
	  color: #bfbfbf;
	  letter-spacing: 4upx;
	}
	.footsBoxs{
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  height: 134upx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 10upx;
		border: solid 1upx #ebebeb;
	  z-index: 999;
	  padding: 20upx 0 20upx 0;
	}
	.footIconBox{
	  display: flex;
	  justify-content:space-around;
	}
	.footIcon{
	  opacity: 1.0;
	  background: #fff;
	  width: 105upx;
		height: 105upx;
	  text-align: center;
	  border-radius: 50%;
	  box-shadow: 0upx 0upx 50upx 0upx 
			rgba(51, 51, 51, 0.2); 
	  padding: 15upx;
	   z-index: 9999;
	}
	.footText{
		color: #4d4d4d;
	  font-size: 26upx;
	}
	.footText-margin{
	  margin-top: -12upx
	}
	.footIcon .iconfont{
	  font-size: 68upx;
	  color: #0092ff;
	}
	.back{
		position: fixed;
		top:65upx;
		left: 25upx;
		border-radius: 50%;
		width: 60upx;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255,255,255,0.6);
		z-index: 20;
		text{
			font-size: 45upx;
		}
	}
</style>
